<template>
  <div>
    <el-card style="height: 500px;overflow: scroll">
      <h1 style="color: aquamarine">个人中心页面</h1>
      <el-form label-width="80px" style="width:500px">

        <el-form-item v-model="user.imgUrl" label="头像">
          <el-upload style="float: left"
                     :action="'http://localhost:19283/v1/upload'"
                     name="file"
                     :limit="1"
                     list-type="picture-card"
                     :on-success="handleSuccess"
                     :on-preview="handlePictureCardPreview"
                     :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>

        <el-form-item label="用户名">
          <el-input value="这是个不能修改的用户名" disabled v-model="user.username"></el-input>
        </el-form-item>

        <el-form-item label="昵称">
          <el-input placeholder="请输入昵称" v-model="user.nickname"></el-input>
        </el-form-item>

        <!--            <el-form-item label="密码">
                      <el-input type="password" placeholder="请输入密码" v-model="user.password"></el-input>
                    </el-form-item>-->

        <el-form-item>
          <el-button type="primary" @click="post()">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "InfoView",
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      user: localStorage.user ? JSON.parse(localStorage.user).user : null
    };
  },
  methods: {
    post() {
      let data = this.qs.stringify(this.user);
      console.log(data)
      this.axios.post("http://localhost:19480/users/info/update", data)
          .then((response) => {
            if (response.data.state == 20000) {
              this.$message.success("修改成功!");
              //跳回到后台管理页面
              this.$router.push('/index');
            } else {
              this.$message.error(response.data.message)
            }
          })
      const data1 = {user, exp: new Date().getTime() + 5 * 1000};
      localStorage.setItem("user", JSON.stringify(data1));

    },
    handleSuccess(response, file, fileList) {
      this.user.imgUrl = response.data;
    },
    handleRemove(file, fileList) {
      this.user.imgUrl = null;

      this.axios.post("http://localhost:19283/v1/remove?url=" + file.response.data)
          .then((response) => {
            if (response.data.state == 20000) {
              this.$message.success("删除完成!");
            }
          })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
  mounted() {

  }
}
</script>

<style scoped>

</style>